<template>
  <div class="q-pa-md">
    <div class="q-gutter-md row">
      <t-btn color="primary" label="Anchor/Self Menu">
        <t-menu anchor="top right" self="top left">
          <t-list style="min-width: 100px">
            <t-item clickable v-close-popup>
              <t-item-section>anchor="top right"</t-item-section>
            </t-item>
            <t-item clickable v-close-popup>
              <t-item-section>self="top left"</t-item-section>
            </t-item>
          </t-list>
        </t-menu>
      </t-btn>

      <t-btn color="primary" label="Anchor/Self Menu">
        <t-menu anchor="center middle" self="center middle">
          <t-list style="min-width: 100px">
            <t-item clickable v-close-popup>
              <t-item-section>anchor="center middle"</t-item-section>
            </t-item>
            <t-item clickable v-close-popup>
              <t-item-section>self="center middle"</t-item-section>
            </t-item>
          </t-list>
        </t-menu>
      </t-btn>

      <t-btn color="primary" label="Anchor/Self Menu">
        <t-menu anchor="bottom right" self="bottom left">
          <t-list style="min-width: 100px">
            <t-item clickable v-close-popup>
              <t-item-section>anchor="bottom right"</t-item-section>
            </t-item>
            <t-item clickable v-close-popup>
              <t-item-section>self="bottom left"</t-item-section>
            </t-item>
          </t-list>
        </t-menu>
      </t-btn>

      <t-btn color="primary" label="Offset Menu">
        <t-menu :offset="[0, 20]">
          <t-list style="min-width: 100px">
            <t-item clickable v-close-popup>
              <t-item-section>:offset="[0, 20]"</t-item-section>
            </t-item>
            <t-item clickable v-close-popup>
              <t-item-section>:offset="[0, 20]"</t-item-section>
            </t-item>
          </t-list>
        </t-menu>
      </t-btn>

      <t-btn color="primary" label="Offset Menu">
        <t-menu :offset="[50, 10]">
          <t-list style="min-width: 100px">
            <t-item clickable v-close-popup>
              <t-item-section>:offset="[50, 10]"</t-item-section>
            </t-item>
            <t-item clickable v-close-popup>
              <t-item-section>:offset="[50, 10]"</t-item-section>
            </t-item>
          </t-list>
        </t-menu>
      </t-btn>

      <t-btn color="primary" label="Offset Menu">
        <t-menu :offset="[-50, 10]">
          <t-list style="min-width: 100px">
            <t-item clickable v-close-popup>
              <t-item-section>:offset="[-50, 10]"</t-item-section>
            </t-item>
            <t-item clickable v-close-popup>
              <t-item-section>:offset="[-50, 10]"</t-item-section>
            </t-item>
          </t-list>
        </t-menu>
      </t-btn>
    </div>
  </div>
</template>
